本节代码对应 GitHub 分支: chapter7
# 改造路由
第一步当然是路由的准备工作。
在 routes/index.js 中,添加如下:
import Singer from '../application/Singer';
//...
{
path: "/singers",
component: Singers,
key: "singers",
routes: [
{
path: "/singers/:id",
component: Singer
}
]
}
@前端进阶之旅: 代码已经复制到剪贴板
当然,我们需要新建 Singer 文件夹,其中的 index.js 如下:
import React from 'react';
function Singer (props) {
return (
<div>Singer</div>
)
}
export default Singer;
@前端进阶之旅: 代码已经复制到剪贴板
接下来我们需要在以前的歌手列表组件中添加以下跳转逻辑:
const enterDetail = (id) => {
props.history.push (`/singers/${id}`);
};
//...
<ListItem key={item.accountId+""+index} onClick={() => enterDetail (item.id)}>
@前端进阶之旅: 代码已经复制到剪贴板
当然,不要忘了这一句,否则作为子路由下的 Singer 组件无法渲染:
//Singers/index.js
import { renderRoutes } from 'react-router-config';
//...
return (
<div>
//...
{ renderRoutes (props.route.routes) }
</div>
)
@前端进阶之旅: 代码已经复制到剪贴板
# 路由跳转动画
由于之前详细拆解过,这里就不着重介绍了。
仍然是利用 react-transition-group。
import React, { useState } from "react";
import { CSSTransition } from "react-transition-group";
import { Container } from "./style";
function Singer (props) {
const [showStatus, setShowStatus] = useState (true);
return (
<CSSTransition
in={showStatus}
timeout={300}
classNames="fly"
appear={true}
unmountOnExit
onExited={() => props.history.goBack ()}
>
<Container>
</Container>
</CSSTransition>
)
}
export default Singer;
